{% block sw_settings_cache_index %}
<sw-page class="sw-settings-cache">

    {% block sw_settings_cache_smart_bar_header %}
    <template #smart-bar-header>
        {% block sw_settings_cache_smart_bar_header_title %}
        <h2>
            {% block sw_settings_cache_smart_bar_header_title_text %}
            {{ $tc('sw-settings.index.title') }}
            <mt-icon
                name="regular-chevron-right-xs"
                size="12px"
            />
            {{ $tc('sw-settings-cache.general.mainMenuItemGeneral') }}
            {% endblock %}
        </h2>
    {% endblock %}
    </template>
{% endblock %}

    {% block sw_settings_cache_content %}
    <template #content>
        <sw-card-view>
            <template v-if="componentIsBuilding">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            <mt-card
                v-else
                position-identifier="sw-settings-cache-content"
                :title="$tc('sw-settings-cache.general.mainMenuItemGeneral')"
                :is-loading="isLoading"
            >

                {% block sw_settings_cache_content_toolbar %}
                <template #toolbar>
                    <sw-card-section secondary>
                        <sw-container
                            class="sw-settings-cache__card-toolbar"
                            columns="1fr 1fr"
                            rows="repeat(2, 40px)"
                        >

                            {% block sw_settings_cache_content_toolbar_environment %}
                            <div>

                                {% block sw_settings_cache_content_toolbar_environment_heading %}
                                <p class="sw-settings-cache__card-toolbar-heading">
                                    {{ $tc('sw-settings-cache.toolbar.environment') }}
                                </p>
                                {% endblock %}

                                {% block sw_settings_cache_content_toolbar_environment_text %}
                                <p>{{ environmentValue }}</p>
                                {% endblock %}
                            </div>
                        {% endblock %}

                            {% block sw_settings_cache_content_toolbar_http_cache %}
                            <div>

                                {% block sw_settings_cache_content_toolbar_http_cache_heading %}
                                <p class="sw-settings-cache__card-toolbar-heading">
                                    {{ $tc('sw-settings-cache.toolbar.httpCache') }}
                                </p>
                                {% endblock %}

                                {% block sw_settings_cache_content_toolbar_http_cache_text %}
                                <p>{{ httpCacheValue }}</p>
                                {% endblock %}
                            </div>
                        {% endblock %}

                            {% block sw_settings_cache_content_toolbar_cache_adapter %}
                            <div>

                                {% block sw_settings_cache_content_toolbar_cache_adapter_heading %}
                                <p class="sw-settings-cache__card-toolbar-heading">
                                    {{ $tc('sw-settings-cache.toolbar.cacheAdapter') }}
                                </p>
                                {% endblock %}

                                {% block sw_settings_cache_content_toolbar_cache_adapter_text %}
                                <p>{{ cacheAdapterValue }}</p>
                                {% endblock %}
                            </div>
                        {% endblock %}
                        </sw-container>
                    </sw-card-section>
                </template>
                {% endblock %}

                {% block sw_settings_cache_content_clear_data_cache_row %}
                <sw-card-section divider="bottom">
                    <sw-container
                        align="center"
                        columns="1fr auto"
                        gap="20px"
                    >
                        <div>
                            {% block sw_settings_cache_content_clear_data_cache_row_heading %}
                            <p class="sw-settings-cache__card-section-heading">
                                {{ $tc('sw-settings-cache.section.clearDataCachesHeadline') }}
                            </p>
                            {% endblock %}

                            {% block sw_settings_cache_content_clear_data_cache_row_text %}
                            <p>{{ $tc('sw-settings-cache.section.clearDataCachesText') }}</p>
                            {% endblock %}
                        </div>

                        {% block sw_settings_cache_content_clear_data_cache_row_button %}
                        <sw-button-process
                            ghost
                            :is-loading="processes.normalClearCache"
                            :process-success="processSuccess.normalClearCache"
                            @update:process-success="resetButtons"
                            @click="clearDataCache"
                        >
                            {{ $tc('sw-settings-cache.section.clearDataCachesButton') }}
                        </sw-button-process>
                        {% endblock %}
                    </sw-container>
                </sw-card-section>
                {% endblock %}

                {% block sw_settings_cache_content_clear_cache_row %}
                <sw-card-section divider="bottom">
                    <sw-container
                        align="center"
                        columns="1fr auto"
                        gap="20px"
                    >
                        <div>

                            {% block sw_settings_cache_content_clear_cache_row_heading %}
                            <p class="sw-settings-cache__card-section-heading">
                                {{ $tc('sw-settings-cache.section.clearCachesHeadline') }}
                            </p>
                            {% endblock %}

                            {% block sw_settings_cache_content_clear_cache_row_text %}
                            <p>{{ $tc('sw-settings-cache.section.clearCachesText') }}</p>
                            {% endblock %}
                        </div>

                        {% block sw_settings_cache_content_clear_cache_row_button %}
                        <sw-button-process
                            ghost
                            :is-loading="processes.normalClearCache"
                            :process-success="processSuccess.normalClearCache"
                            @update:process-success="resetButtons"
                            @click="clearCache"
                        >
                            {{ $tc('sw-settings-cache.section.clearCachesButton') }}
                        </sw-button-process>
                        {% endblock %}
                    </sw-container>
                </sw-card-section>
                {% endblock %}

                {% block sw_settings_cache_content_indexes_row %}
                <sw-card-section class="sw-settings-cache__card-indexes">
                    <sw-container>
                        {% block sw_settings_cache_content_indexes_row_heading %}
                        <p class="sw-settings-cache__card-section-heading">
                            {{ $tc('sw-settings-cache.section.indexesHeadline') }}
                        </p>
                        {% endblock %}

                        {% block sw_settings_cache_content_indexes_row_text %}
                        <p>{{ $tc('sw-settings-cache.section.indexesText') }}</p>
                        {% endblock %}
                    </sw-container>
                    <sw-container
                        columns="2fr 3fr 1fr"
                        gap="10px"
                        justify="end"
                        align="end"
                    >
                        <mt-select
                            v-model="indexingMethod"
                            name="indexingMethod"
                            class="sw-settings-cache__skip-indexers-select"
                            :label="$tc('sw-settings-cache.section.indexingModeLabel')"
                            :disabled="processes.updateIndexes"
                            :options="indexingMethodOptions"
                        />

                        {% block sw_settings_cache_content_indexes_row_skip_select %}
                        <sw-select-base
                            class="sw-settings-cache__indexers-select"
                            :label="indexingMethod === 'skip' ? $tc('sw-settings-cache.section.indexesSkipSelectLabel') : $tc('sw-settings-cache.section.indexesOnlySelectLabel')"
                            :disabled="processes.updateIndexes"
                        >
                            <template #sw-select-selection>
                                <sw-label
                                    v-for="(selection, index) in indexerSelection"
                                    :key="index"
                                    @dismiss="changeSelection(false, selection)"
                                >
                                    {{ selection }}
                                </sw-label>
                                <sw-label
                                    ghost
                                    class="sw-settings-cache__indexers-placeholder"
                                >
                                    {{ indexingMethod === 'skip' ? $tc('sw-settings-cache.section.indexesSkipSelectPlaceholder') : $tc('sw-settings-cache.section.indexesOnlySelectPlaceholder') }}
                                </sw-label>
                            </template>
                            <template #results-list>
                                <sw-select-result-list :options="[indexers]">
                                    <template #result-item="{ item, index }">
                                        <ul
                                            class="sw-settings-cache__indexers-list"
                                            @click.stop
                                        >
                                            <li
                                                v-for="(updaters, indexer) in item"
                                                :key="indexer"
                                            >
                                                <mt-checkbox
                                                    class="sw-settings-cache__indexers-entry"
                                                    :checked="indexerSelection.includes(indexer)"
                                                    :label="indexer"
                                                    :name="indexer"
                                                    size="small"
                                                    @update:checked="changeSelection($event, indexer)"
                                                />
                                                <ul>
                                                    <li
                                                        v-for="(updater, index) in updaters"
                                                        :key="index"
                                                    >
                                                        <mt-checkbox
                                                            class="sw-settings-cache__indexers-entry"
                                                            :checked="indexerSelection.includes(updater) || indexerSelection.includes(indexer)"
                                                            :label="updater"
                                                            :name="updater"
                                                            size="small"
                                                            :disabled="indexerSelection.includes(indexer)"
                                                            @update:checked="changeSelection($event, updater)"
                                                        />
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </template>
                                </sw-select-result-list>
                            </template>
                        </sw-select-base>
                    {% endblock %}

                        {% block sw_settings_cache_content_indexes_row_button %}
                        <sw-button-process
                            name="updateIndexesButton"
                            class="sw-button--large"
                            ghost
                            size="large"
                            :is-loading="processes.updateIndexes"
                            :process-success="processSuccess.updateIndexes"
                            @update:process-success="resetButtons"
                            @click="updateIndexes"
                        >
                            {{ $tc('sw-settings-cache.section.indexesButton') }}
                        </sw-button-process>
                    {% endblock %}
                    </sw-container>
                </sw-card-section>
        {% endblock %}
            </mt-card>
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
